<template>
  <div class="nav-space discover-container">
    <swiper></swiper>
    <tabbar class="tabbar" />
    <recommend-song-list />
    <div class="space-h"></div>
    <leaderboard />
    <div class="space-h"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Swiper from "@/components/Discover/Swiper.vue";
import Tabbar from "@/components/Discover/Tabbar.vue";
import RecommendSongList from "@/components/Discover/RecommendSongList.vue";
import MusicCalendar from "@/components/Discover/MusicCalendar.vue";
import Leaderboard from "@/components/Discover/Leaderboard.vue";

export default defineComponent({
  name: "Discover",
  components: {
    Swiper,
    Tabbar,
    RecommendSongList,
    MusicCalendar,
    Leaderboard,
  },
  setup() {},
});
</script>

<style scoped>
.discover-container {
  background-color: var(--grap-color);
}

.tabbar {
  padding: 24rem 0;
  border-bottom: 1px solid var(--five-level);
}
</style>
